<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Watchlist</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/topsearch.css">
	<link rel="stylesheet" type="text/css" href="css/header.css">
    <link rel="stylesheet" type="text/css" href="css/footer.css">
	<link rel="stylesheet" type="text/css" href="css/watchlist.css">
	<script src="./jquery/jquery-1.11.2.min.js"></script>
    <script src="./bootstrap/js/bootstrap.js"></script>
	<script src="./js/watchlist.js"></script>
    <script src="./js/template.js"></script>
</head>
<body>
	<!-- search start -->
    <div class="top">  
        <header class="container head">
            <div class="row">
                <div class="col-sm-10">
                    <ul class="nav nav-pills">
                        <li role="presentation"><a href="#">aDaily Deals</a></li>
                        <li role="presentation"><a href="./sell.html">Sell</a></li>
                        <li role="presentation"><a href="#">Help & Contact</a></li>
                    </ul>
                </div>
                <div class="col-sm-2 topright">
                    <ul class="nav nav-pills"  style="width: 188px">
                        <li role="presentation" class="dropdown init" >
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                              My eBay<span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                              <li><span class="glyphicon glyphicon-user"></span> <a href="./login_regist.html" style="display: inline-block">login</a></li>
                              <li><span class="glyphicon glyphicon-user"></span> <a href="./watchlist.html" style="display: inline-block">watchlist</a></li>
                            </ul>
                        </li>
                        <li role="presentation" class="dropdown logined" style="display: none">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                              Hi <i class="username"></i><span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                              <li><span class="glyphicon glyphicon-user"></span> <a href="./watchlist.html" style="display: inline-block">Settings</a></li>
                              <li> <span class="glyphicon glyphicon-log-out"></span><a href="javascript:void(0)" style="display: inline-block" onclick="logout()">Logout</a></li>
                            </ul>
                        </li>
                        <li role="presentation"><a href="#"><span class="glyphicon glyphicon-bell"></span></a></li>
                        <li role="presentation"><a href="#"> <span class="glyphicon glyphicon-shopping-cart"></span></a></li>
                    </ul>
                </div>
            </div>
        </header>
    </div>
    <div class="row search">
        <div class="col-sm-1 col-sm-offset-1">
            <img src="image/logo.png">
        </div>
        <div class="col-sm-1" style="width:120px">
            <ul class="nav navbar-nav"  style="margin-top:-5px">
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Categary <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
            </ul>
        </div>
        <div class="col-sm-5">
            <form class="form-inline">
                <div class="form-group">
                    <div class="input-group" style="display: flex;">
                        <input type="text" class="form-control" id="exampleInputAmount" style="width:420px">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:100px">Global <span class="caret"></span></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                              <li><a href="#">America</a></li>
                              <li><a href="#">Great Britain</a></li>
                              <li><a href="#">Deutschland</a></li>
                              <li role="separator" class="divider"></li>
                              <li><a href="#">Global</a></li>
                              <li><a href="#">Europe</a></li>
                            </ul>
                        </div><!-- /btn-group -->
                    </div>  
                </div>
            </form>
        </div>
        <div class="col-sm-2">
            <button type="button" class="btn btn-primary sub" style="width:150px;margin-left: 45px">Search</button>
        </div>
        <div class="col-sm-1" style="margin-top: 5px;margin-left: 20px">Advanced</div>
    </div>
    <!-- search end -->
	<div class="container">
		<!-- swiper start -->
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width:70%;height:100px;margin:0 auto;">
  			<!-- Indicators -->
		  <ol class="carousel-indicators" style="bottom:0px">
		    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
		    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
		  </ol>

		  <!-- Wrapper for slides -->
		  <div class="carousel-inner" role="listbox">
		    <div class="item active">
		      <img src="./image/800x100.png">
		      <div class="carousel-caption">
		      </div>
		    </div>
		    <div class="item">
		     <img src="./image/800x100.png">
		      <div class="carousel-caption">
		      </div>
		    </div>
		  </div>	
		</div>
		<!-- swiper end -->
		<ul class="nav nav-tabs" style="margin-top: 20px;">
			<li role="presentation" class="active"><a href="#">Activity</a></li>
		  	<li role="presentation" class="dropdown">
		    	<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
		      Messages <span class="caret"></span>
		    	</a>
		    	<ul class="dropdown-menu">
		      		<li><a href="#">Inbox</a></li>
		      		<li><a href="#">Sent</a></li>
		      		<li><a href="#">Trash</a></li>
		    	</ul>
		  	</li>
		  	<li role="presentation"><a href="#">Account</a></li>
		  	<li style="float:right"><a href="#">Change Settings</a></li>
		</ul>
		<div class="content" style="margin-top:10px;display: flex;">
			<!-- 左侧按钮组 -->
            <div class="list_left">
                <div>
                    <div class="lbtn_f">
                        <button type="button" class="btn btn-default lbtn">Summary</button>

                    </div>
                    <div class="lbtn_f">
                        <button type="button" class="btn btn-default lbtn">Recently viewed</button>

                    </div>
                    <div class="lbtn_f ">
                        <button type="button" class="btn btn-default lbtn active ">Watch list</button>

                    </div>
                    <div class="lbtn_fm">
                        <button type="button" class="btn btn-default lbtn lbtn1" style="text-align:left; padding-left:40px;">
                            <span class="glyphicon glyphicon-chevron-right span1"></span> Buy
                            <span class="badge " style="background: #88CEEC">4</span>
                        </button>
                        <div class="down buy">
                            <div>
                                <a href="#">Bid/Offers</a>
                            </div>
                            <div>
                                <a href="#">Unpaid items</a>
                            </div>
                            <div>
                                <a href="#">Orders</a>
                            </div>
                        </div>
                    </div>
                    <div class="lbtn_fm">
                        <button type="button" class="btn btn-default lbtn lbtn2" style="text-align:left; padding-left:40px;">
                            <span class="glyphicon glyphicon-chevron-right span1"></span> Sell
                        </button>
                        <div class="down sell">
                            <div>
                                <a href="#">Sold</a>
                            </div>
                            <div>
                                <a href="#">Unsold</a>
                            </div>
                            <div>
                                <a href="#">Returns</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右侧 -->
                        <div class="list_right" style="margin-left:30px;width:80%;">
            	<!-- 标题 -->
                <h4 class="title" style="width:100%;height:40px;background: #ccc;line-height: 40px;padding-left:5px;">Watch list</h4>
                <div class="list_top" style="display: flex;justify-content: space-between;">
                    <div>
                        <input type="checkbox" id="all">
                        <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">Delete</button>
                    </div>
                        <!-- Modal -->
                      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                          <div class="modal-dialog" role="document">
                            <div class="modal-content">
                              <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">delete</h4>
                              </div>
                              <div class="modal-body">
                                Did you delete this?
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary" onclick="del()">Yes</button>
                              </div>
                            </div>
                          </div>
                        </div>
                    <div class="sort" style="display: flex;">
                        <span>Status </span>
                        <div class="dropdown tdp">
                            <button class="btn btn-default dropdown-toggle btn-sm" type="button" data-toggle="dropdown">
                                 All
                                <span>(2)</span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Active(
                                        <span>2</span>) </a>
                                </li>
                                <li>
                                    <a href="#">Ended(
                                        <span>0</span>) </a>
                                </li>
                            </ul>
                        </div>
                        <span> Sort </span>
                        <div class="dropdown tdp">
                            <button class="btn btn-default dropdown-toggle btn-sm" type="button" data-toggle="dropdown">
                                Time left:ending soonest
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <li>
                                    <a href="#">Time left:newly listed</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                    <div class="lists" style="margin-top: 10px">
                    	<div class="btn-bottom">
                            <button type="button" class="btn btn-primary ">All Categories
                                <span>(2)</span>
                            </button>
                        </div>
                        <div class="row" style="height:225px;margin-top:10px">
                            <div class="col-sm-3" style="display: flex;">
                                <input type="checkbox" name="" class="checklist" onchange="changechoose()">
                                <div style="width:80%;height:100%;padding:20px 0;border:1px solid #ccc">
                                    <img src="./image/s-l226.jpg" style="width:100%;height:100%">
                                </div>
                                
                            </div>
                            <div class="col-sm-3">
                                <p><a href="./details.html">EARLY Ming Tomb interior Nanking China Postcard - Turtie Statue Monument View PC</a></p>
                                <p>scotfi17|2391|100%</p>
                                <p><a href="#">delete item</a></p>
                            </div>
                            <div class="col-sm-2">
                                <p>2d 6h left</p>
                                <p>Sunday</p>
                                <p>09:30 PM CST</p>
                            </div>
                            <div class="col-sm-2">
                                <p>US $2.25</p>
                                <p>+US $1.50</p>
                                <P>shipping</P>
                            </div>
                            <div class="col-sm-2">
                                <button type="button" class="btn btn-primary ">Bid now
                                </button>
                                <p><a href="#">View seller's other items</a></p>
                            </div>
                        </div>
                        <div class="row" style="height:225px;margin-top:10px">
                                <div class="col-sm-3" style="display: flex;">
                                    <input type="checkbox" name="" class="checklist" onchange="changechoose()">
                                    <div style="width:80%;height:100%;padding:20px 0;border:1px solid #ccc">
                                        <img src="./image/s-l226.jpg" style="width:100%;height:100%">
                                    </div>
                                    
                                </div>
                                <div class="col-sm-3">
                                    <p><a href="./details.html">EARLY Ming Tomb interior Nanking China Postcard - Turtie Statue Monument View PC</a></p>
                                    <p>scotfi17|2391|100%</p>
                                    <p><a href="#">delete item</a></p>
                                </div>
                                <div class="col-sm-2">
                                    <p>2d 6h left</p>
                                    <p>Sunday</p>
                                    <p>09:30 PM CST</p>
                                </div>
                                <div class="col-sm-2">
                                    <p>US $2.25</p>
                                    <p>+US $1.50</p>
                                    <P>shipping</P>
                                </div>
                                <div class="col-sm-2">
                                    <button type="button" class="btn btn-primary ">Bid now
                                    </button>
                                    <p><a href="#">View seller's other items</a></p>
                                </div>
                            </div>                 
                    </div>
                <form>
                <div class="watchlist"></div>
                 </form>
            </div>
           
		</div>
	</div>
    <footer class="footer ">
          <div>
            <a href="#"> <span class="text-muted">About eBay</span></a>
            <a href="#"> <span class="text-muted">Announcements</span></a>
            <a href="#"> <span class="text-muted">Security Center</span></a>
            <a href="#"><span class="text-muted">Resolution Center</span></a>
            <a href="#"> <span class="text-muted">Seller Information Center</span></a>
            <a href="#"> <span class="text-muted">Polices</span></a>
            <a href="#"><span class="text-muted">Affiliates</span></a>
            <a href="#"><span class="text-muted">Help & Contact</span></a>
            <p class="copy">Copyright&copy;1995-2018 eBay Inc.All Right Reserved.
              <a class="text-muted" href="#"> <u>Accessibility</u></a>,
              <a class="text-muted" href="#"><u> User agreement</u>   </a>,
              <a class="text-muted" href="#"><u>Privacty</u> </a>,
              <a class="text-muted" href="#"><u>Cookies</u>     </a>
                  and
              <a class="text-muted" href="#"><u>AdChoice</u> </a>
              <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" title="Tooltip on right"></span>
            </p>
          </div>
    </footer>
</body>
</body>
</html>